/*
 * @Description: 车图标的组件
 * @Author: yingying.fan
 * @Date: 2019-05-13 11:30:12
 * @Last Modified by: yingying.fan
 * @Last Modified time: 2019-05-27 18:22:50
 */
<template>
  <div
    class="flex-v flex-he flex-vc bus-wrapper-normal"
    :class="wrapperClass"
    :style="busStyle"
  >
    <p class="fontsize24">{{busId}}</p>
    <slot></slot>
    <div
      v-if="!showNormal"
      class="flex-h flex-hc flex-vc"
    >
      <img
        v-if="busInfo.hasAttention"
        src="../assets/bus-attention.png"
        class="attention-img"
      >
      <img
        v-if="busWarn"
        src="../assets/bus-warn.png"
        class="warn-img"
      >
      <img
        v-if="busError"
        src="../assets/bus-error.png"
        class="warn-img"
      >
    </div>
    <img
      :src="iconUrl"
      class="bus-icon"
    >
    <!-- :class="iconClass" -->
  </div>
</template>

<script>
import BusInfoModel from '../model/BusInfoModel.js'
import { BUS_BREAK_DOWN, BUS_TRAFFIC_JAM } from '../constants/BusState.js'
export default {
  components: {

  },
  props: {
    // 强制展示默认状态，即不展示其他颜色的车辆以及故障状态
    // 竹节图上的多辆车时
    showNormal: {
      type: Boolean,
      default: false
    },
    // 在车辆弹窗中展示车子不变大
    showInPop: {
      type: Boolean,
      default: false
    },
    // 车辆信息
    busInfo: {
      type: BusInfoModel,
      default: () => {
        return null
      }
    },
    busStyle: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      normalIcon: require('../assets/bus-normal.png'),
      redIcon: require('../assets/bus-red.png')
    }
  },
  computed: {
    busId() {
      if (this.$showDetail) {
        return this.busInfo.isArrived + '_' + this.busInfo.stationId
      }
      return ''
    },
    // 车辆图标
    iconUrl() {
      if (!this.showNormal && this.busInfo.state === 1) {
        return this.redIcon
      }
      return this.normalIcon
    },
    wrapperClass() {
      let className = 'bus-wrapper-normal'
      if (this.busInfo) {
        if (!this.busInfo.isArrived && this.busInfo.closeToStation && !this.showInPop) {
          className = 'bus-wrapper-close-to-station'
        }
      }
      return className
    },
    busWarn() {
      return this.busInfo.busState === BUS_TRAFFIC_JAM
    },
    busError() {
      return this.busInfo.busState === BUS_BREAK_DOWN
    }
  }
}
</script>

<style scoped>
.bus-wrapper-normal > p {
  /* position: absolute;
  z-index: 20;
  top: -50px; */
  background-color: #aaf;
  word-wrap: break-word;
  overflow: visible;
}
.bus-wrapper-normal {
  width: 60px;
  transition: width 1s, height 1s, margin-left 1s;
  overflow: visible;
  /* background-color: #aaf; */
}
.bus-wrapper-close-to-station {
  width: 84px;
  margin-left: -12px;
}
.bus-wrapper-normal > .bus-icon {
  width: 60px;
  height: 26px;
}
.bus-wrapper-close-to-station > .bus-icon {
  width: 84px;
  height: 36px;
}
.bus-icon {
  /* width: auto;
  height: auto; */
  max-width: 100%;
  transition: width 1s, height 1s;
}
/* 已到站样式 */
.bus-arrived {
  z-index: 2;
}
/* 即将到站样式 */
.bus-soon-arrive {
  z-index: 1;
}
.attention-img {
  width: 34px;
  height: 34px;
  margin: 0 3px 4px 3px;
}
.warn-img {
  width: 22px;
  height: 22px;
  margin: 6px 3px 10px 3px;
}
</style>
